<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>结算页面</title>

		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />

		<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="../css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="../css/jsstyle.css" rel="stylesheet" type="text/css" />
		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
		
		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/addstyle.css" rel="stylesheet" type="text/css">
		
		
		<script type="text/javascript" src="../js/vue2.5.js" ></script>
		<script type="text/javascript" src="../js/axios.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="../js/global.js" ></script>
		<script type="text/javascript" src="../js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script src="../js/param.js"></script>
		<script type="text/javascript" src="../js/address.js"></script>
		<script src="../js/jquery-1.11.2.min.js"></script>
		
		
		<style>
			.user-addresslist{
				overflow: hidden;
			}.adress{
				display:inline-block;
			}
			.d1{
				display:inline-block;
				width:100px;
				float:left:
			}.d2{
			display:inline-block;
				width:30%;
				float:left:
			}
			.s1{
				padding:10px;
				margin-bottom:20px
			}
			.s2{
				display:inline-block;
				width:20%;
				float:left;
				height:34px;
				
			}
			.s3{
				display:inline-block;
				width:80%;
				float:left;
			}
			.s4{
				width:100%;
				border:1px solid #ccc;
				outline:none;
				display: block;
				  height: 34px;
				  padding: 6px 12px;
				  font-size: 14px;
				  line-height: 1.42857143;
				  color: #555;
				  background-color: #fff;
				  background-image: none;
				  border: 1px solid #ccc;
				  border-radius: 4px;
				  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
				       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
				          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			}
			.s4:focus{
				 border-color: #66afe9;
				  outline: 0;
				  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
				          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
			}
		
		</style>
	</head>

	<body>
			<div class="container">
			<div class="concent">
				<!--地址 -->
				<div class="paycont">
					<div class="address">
						<h3>确认收货地址 </h3>
						<div class="control">
							<div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
						</div>
						<div class="clear"></div>
						<ul class="adress-context">
							<div class="per-border"></div>
							<li class="user-addresslist " v-for="(adress,index) in adressData">
								<span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
								<input type="hidden" class="aid" id="aid" name="aid" v-model="adress.aid">
								<p class="new-tit new-p-re">
									<span class="new-txt">{{adress.uname}}</span>
									<span class="new-txt-rd2">{{adress.phone}}</span>
								</p>
								<div class="new-mu_l2a new-p-re">
									<p class="new-mu_l2cw">
										<span class="adress1">{{adress.adress1}}&nbsp;</span>
										<span class="street">{{adress.adress2}}</span></p>
								</div>
								<div class="new-addr-btn">
									<a href="javascript:void(0);" @click="get(adress.aid,index)"><i class="am-icon-edit"></i>编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);"  @click="remove(adress.aid,index)"><i class="am-icon-trash"></i>删除</a>
								</div>
							</li>
							
						</ul>

						<div class="clear"></div>
						<div id="motai" style="display:none;">
					<div class="s1">
						<label  class="s2">收货人</label>
						<div class="s3">
							<input type="text" class="s4"  v-model="adress.uname" >
						</div>
					</div>
					<div class="s1">
						<label  class="s2 ">手机号码</label>
						<div class="s3">
							<input type="text" class="s4"  v-model="adress.phone">
						</div>
					</div>
					<div class="s1">
						<label  class="s2">所在地</label>
						<div class="s3">
							<input type="text" class="s4" v-model="adress.adress1">
						</div>
					</div>
					<div class="s1">
						<label  class="s2 ">详细地址</label>
						<div class="s3">
							<input type="text" class="s4" v-model="adress.adress2">
						</div>
					</div>
					<div class="s1">
						<div class="am-u-sm-9 am-u-sm-push-3">
							<input type="button" value="修改" @click="update()" class="am-btn am-btn-danger">
							<a href="javascript:;" onclick="window.parent.layer.closeAll();" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
						</div>
					</div>
				</div>
				<div class="theme-popover">

				<!--标题 -->
				<div class="am-cf am-padding">
					<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add address</small></div>
				</div>
				<hr/>

				<div class="am-u-md-12">
					<form class="am-form am-form-horizontal">

						<div class="am-form-group">
							<label for="user-name" class="am-form-label">收货人</label>
							<div class="am-form-content">
								<input type="text"  id="uname" name="uname" placeholder="收货人">
							</div>
						</div>

						<div class="am-form-group">
							<label for="user-phone" class="am-form-label">手机号码</label>
							<div class="am-form-content">
								<input  id="phone" name="phone" placeholder="手机号必填" type="email">
							</div>
						</div>

						<div class="am-form-group">
							<label for="" class="adress-lable am-form-label">所在地</label>
							<div data-toggle="distpicker" class="suozaidi">
						        <div class="adress">
						          <select class="d1" id="province2" data-province="---- 选择省 ----"></select>
						        </div>
						        <div class="adress">
						          <select class="d2" id="city2" data-city="---- 选择市 ----"></select>
						        </div>
						        <div class="adress">
						          <select class="d2" id="district2" data-district="---- 选择区 ----"></select>
						        </div>
						     </div>
						</div>

						<div class="am-form-group">
							<label for="user-intro" class="am-form-label">详细地址</label>
							<div class="am-form-content">
								<textarea class="" rows="3" id="adress2" name="adress2"  placeholder="输入详细地址"></textarea>
								<small>100字以内写出你的详细地址...</small>
							</div>
						</div>

						<div class="am-form-group theme-poptit">
							<div class="am-u-sm-9 am-u-sm-push-3">
								<a class="am-btn am-btn-danger" @click="addAdress()">保存</a>
								<div class="am-btn am-btn-danger close">取消</div>
							</div>
						</div>
					</form>
				</div>

			</div>
					</div>
					
					<!--订单 -->
					<div class="concent">
						<div id="payTable">
							<h3>确认订单信息</h3>
							<div class="cart-table-th">
								<div class="wp">

									<div class="th th-item">
										<div class="td-inner">商品信息</div>
									</div>
									<div class="th th-price">
										<div class="td-inner">单价</div>
									</div>
									<div class="th th-amount">
										<div class="td-inner">数量</div>
									</div>
									<div class="th th-sum">
										<div class="td-inner">金额</div>
									</div>
									<div class="th th-oplist">
										<div class="td-inner">配送方式</div>
									</div>

								</div>
							</div>
							<div class="clear"></div>

							 <tr class="item-list" >
								<div class="bundle  bundle-last">

									<div class="bundle-main">
										<ul class="item-content clearfix"  v-for="(order,index) in orderData">
											<div class="pay-phone">
												<li class="td td-item">
													<div class="item-pic">
														<a href="#" class="J_MakePoint">
															<img :src="baseUrl+'/goods/getgoods?gid='+ order.goods.gid" style="width:100px;height:100px;" class="itempic J_ItemImg"></a>
													</div>
													<div class="item-info">
														<div class="item-basic-info">
															<a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">{{order.goods.gname}}</a>
														</div>
													</div>
												</li>
												<li class="td td-info">
													<div class="item-props">
														<span class="sku-line">描述：{{order.goods.gdesc}}</span>
														<span class="sku-line"></span>
													</div>
												</li>
												<li class="td td-price">
													<div class="item-price price-promo-promo">
														<div class="price-content">
															<em class="J_Price price-now">{{order.goods.gprice}}.00</em>
														</div>
													</div>
												</li>
											</div>
											<li class="td td-amount">
												<div class="amount-wrapper ">
													<div class="item-amount ">
														<span class="phone-title">购买数量</span>
														<div class="sl">
															<input class="min am-btn" name="" type="button" value="-" @click="updateQty(index,-1)" />
															<input class="text_box" name="" type="text" v-model="order.qty" style="width:30px;" />
															<input class="add am-btn" name="" type="button" value="+" @click="updateQty(index,1)"  />
														</div>
													</div>
												</div>
											</li>
											<li class="td td-sum">
												<div class="td-inner">
													<em tabindex="0" class="J_ItemSum number">{{order.goods.gprice*order.qty}}.00</em>
												</div>
											</li>
											<li class="td td-oplist">
												<div class="td-inner">
													<span class="phone-title">配送方式</span>
													<div class="pay-logis">
														快递<b class="sys_item_freprice">包邮</b>
													</div>
												</div>
											</li>

										</ul>
										<div class="clear"></div>

									</div>
							</tr>  
							
							<div class="clear"></div>
							</div>

						
							</div>
							<div class="clear"></div>
							<div class="pay-total">
							<!--留言-->
							<div class="order-extra">
								<div class="order-user-info">
									<div id="holyshit257" class="memo">
										<label>买家留言：</label>
										<input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明" class="memo-input J_MakePoint c2c-text-default memo-close">
										<div class="msg hidden J-msg">
											<p class="error">最多输入500个字符</p>
										</div>
									</div>
								</div>

							</div>
							

							
							<div class="clear"></div>
							</div>
							<!--含运费小计 -->
							<div class="buy-point-discharge ">
								<p class="price g_price ">
									合计（含运费） <span>¥</span><em class="pay-sum">10.00</em>
								</p>
							</div>

							<!--信息 -->
							<div class="order-go clearfix">
								<div class="pay-confirm clearfix">
									
									<div class="box" id="box">
										<div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
											<span class="price g_price ">
                                    <span>¥</span> <em class="style-large-bold-red " id="J_ActualFee">{{getTotalPrice()+10}}.00</em>
											</span>
										</div>

										<div id="holyshit268" class="pay-address">

											<p class="buy-footer-address">
												<span class="buy-line-title buy-line-title-type">寄送至：</span>
												
												<span class="street">{{adress2.adress}}</span>
												</span>
												</span>
											</p>
											<p class="buy-footer-address">
												<span class="buy-line-title">收货人：</span>
												<span class="buy-address-detail">   
                                         <span class="buy-user">{{adress2.uname}} </span>
												<span class="buy-phone">{{adress2.phone}}</span>
												</span>
											</p>
										</div>
									</div>
									
									<div id="holyshit269" class="submitOrder">
										<div class="go-btn-wrap">
											<a id="J_Go" href="javascript:;" class="btn-go" tabindex="0" title="点击此按钮，提交订单" @click="sub()">提交订单</a>
										</div>
									</div>
									<div class="clear"></div>
								</div>
							</div>
						</div>

						<div class="clear"></div>
					</div>
				</div>
				<div class="footer">
					<div class="footer-hd">
						<p>
							
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com XXX <a href="http://www.cssmoban.com/" target="_blank" title="模板之家"></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
						</p>
					</div>
				</div>
			
				
			
			
			
			<div class="theme-popover-mask"></div>
			

			<div class="clear"></div>
		</div>	
	</body>
	<script>
	
		
		var orid = getParam('orid');
		var uid = localStorage.getItem('id');
		var aid = localStorage.getItem('aid');
		var vue = new Vue({
		el:'.container',
		data:{
			orderData:[],
			baseUrl:baseUrl,
			adressData:[],
			adress:{},
			adress2:{
				uname:localStorage.getItem("uname"),
				phone:localStorage.getItem("phone"),
				adress:localStorage.getItem("adress"),
			}
		},
		methods:{
			query:function(){
				//查询地址
				axios.get(baseUrl + '/adress/query',{
					params:{
						uid:uid
					}
				})
					.then(function(response) {
						
						this.adressData = response.data;
						
					}.bind(this))
					.catch(function(error) {
						layer.msg('请求失败');
					});
				
			},
			
			get:function(aid){
				axios.get(baseUrl + '/adress/get',{
					params:{
						aid:aid
					}
				})
					.then(function(response) {
						this.adress= response.data;
					}.bind(this))
					.catch(function(error) {
						layer.msg('请求失败');
					});
				
				layer.open({
					title:'修改地址',
				    type: 1,				   
				    area: ['420px', '400px'], //宽高
				    content: $('#motai')
				});
			},
			remove:function(aid,index){
				if(!window.confirm('确定删除地址？'))
					return;
				//ajax
				axios.get(baseUrl + '/adress/delete',{
						params:{
							aid:aid
						}
					})
					.then(function(response) {
						this.adressData.splice(index,1);
						layer.msg('删除地址成功！');
					}.bind(this))
					.catch(function(error) {
						layer.msg('删除地址失败');
					});
			},
			update:function(){
				
				axios.post(baseUrl + '/adress/update', $.param(this.adress))
				.then(function(response) {
					layer.msg('更新成功');
					window.parent.layer.closeAll();
					location.reload();
				})
				.catch(function(error) {
					layer.msg('请求失败');
					
				});
				
			},
			addAdress:function(){
				if (!checkForm())
					return;
				
				 axios.get( baseUrl + '/adress/add',{ 
					 params:{
						uname:$('#uname').val(),
						phone:$('#phone').val(),
						adress1 : $("#province2 option:selected").text()+"-"+$("#city2 option:selected").text()+"-"+$("#district2 option:selected").text(),
						adress2: $("#adress2").val(),
						uid:uid
					}
				})
				.then(function(response) {
					layer.msg('增加地址成功');
					location.reload();
					
				})
				.catch(function(error) {
					layer.msg('增加地址失败');
				}); 

			},
			getOrder:function(){
				//查询订单
				 axios.get(baseUrl + '/order/getByorid',{
						params:{
							orid:orid
						}
					})
						.then(function(response) {
							
							this.orderData = response.data;
							
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
			},
			//修改数量
			updateQty: function(index,val) {
				this.orderData[index].qty += val; //加一或者减一
				
			},
			//返回订单总金额
			getTotalPrice: function() {
				var totalPrice = 0;
				//遍历订单数组数据
				this.orderData.forEach(function(order) {

					totalPrice += parseInt(order.qty) * order.goods.gprice;

				});
				
				return totalPrice;
			},
			sub:function(){
				//提交订单
				 axios.get(baseUrl + '/order/update2',{
					params:{
						orid:orid,
						ostate:"待发货"
					}
					
				}).then(function(response) {
					
					
				location.href="success.html?orid="+orid;
					
				}.bind(this))
				.catch(function(error) {
					layer.msg('请求失败');
				});
				 
				
			}
			
		},
		mounted:function(){
			this.query();
			this.getOrder();
		}	
	});
		
		//表单验证函数
		function checkForm() {

		//收件人
		var uname = $('#uname');

		if (uname.val() == '' ) {
			layer.msg('收件人不能为空，');
			uname.focus();
			return false;
		}

		

		//手机验证
		var Phone = $('#phone');
		r = /^1[3-9]\d{9}$/;

		if (r.test(Phone.val()) != true || Phone.val() == '') {
			layer.msg('手机格式不正确');
			Phone.focus();
			return false;
		}

		return true;
	}	
	
	$(".adress-context").on('click','.user-addresslist .new-option-r' , function(){
				
				$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
				$(this).text("设为默认");
				var aid = $(this).siblings('.aid').val();
				localStorage.setItem("aid",aid);	
				var adress = $(this).siblings('.new-mu_l2a').find('.adress1').text()+" "+ $(this).siblings('.new-mu_l2a').find('.street').text();
				localStorage.setItem("adress",adress);	
				var uname = $(this).siblings('.new-tit').find(".new-txt").text();
				localStorage.setItem("uname",uname);
				var phone = $(this).siblings('.new-tit').find(".new-txt-rd2").text();
				localStorage.setItem("phone",phone);	
					
		}); 
	</script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/distpicker.data.js"></script>
		<script src="../js/distpicker.js"></script>
		<script src="../js/main.js"></script>
</html>